<template>
    <div style="touch-action: none" class="panorama" id="container">
    </div>
</template>

<script>
    export default {
        name: "Panorama",
        props:{
            panoramaMsgProps:{
                type:Object,
            }
        },
        data(){
            return{
                PhotoSphereViewer:'',
                panoramaMsg:{
                    url:''
                }
            }
        },
        mounted(){
            this.panoramaMsg = Object.assign({},this.panoramaMsg,this.panoramaMsgProps);
            setTimeout(()=>{
                this.panoramaMediaFn();
            },50)
        },
        methods: {
            panoramaMediaFn(){
                this.PhotoSphereViewer = require('../../../../../static/js/panorama');
                this.loadPredefinedPanorama();
            },
            loadPredefinedPanorama( ) {
                let that = this;
                var loader = document.createElement('div');
                loader.className = 'loader';
                var div = document.getElementById('container');
                div.style.height = '30px';
                let urlName = that.panoramaMsg.url;
                var PSV = new that.PhotoSphereViewer.PhotoSphereViewer({
                    panorama: urlName,
                    container: div,
                    time_anim: 1,//是否自动旋转
                    navbar: true,
                    size: {
                        width: '100vw',
                        height: '100vh'
                    },
                    loading_html: loader,
                    smooth_user_moves: false,
                });
            }
        },
        watch:{
            panoramaMsgProps(val){
                if(val && val.url){
                    this.panoramaMsg = Object.assign({},this.panoramaMsg,val);
                    setTimeout(()=>{
                        this.panoramaMediaFn();
                    },50)
                }

            }
        },
    }
</script>

<style scoped>

</style>